<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./out.css">
    <script src="../jQuery.mini.js"></script>
</head>

<body>
    <!-- 顶部 -->
    <div class="jiguo">
        <div class="zhong">
            <a href=""><img src="./img/极果.png" alt="" class="jiguo_1"></a>
            <div class="jiguo_4">
                <div class="jiguo_2">
                    <form action="" class="jiguo_5">
                        <input type="text">
                        <div class="jiguo_6">
                            <button>搜索</button>
                        </div>
                    </form>
                </div>
                <div class="jiguo_7"><a href="">全部分类</a></div>
            </div>
            <div class="jiguo_8">
                <a href="">
                    <span class="jiguo_num">分销伙伴招募中!</span>
                    <img src="./img/极果优品.png" alt="">
                </a>
            </div>
        </div>
    </div>

    <!-- 首页导航栏 -->
    <div class="shouye_1">
        <div class="shouye_2">
            <ul class="shouye_3">
                <li>首页</li>
                <li>试用</li>
                <li>新品</li>
                <li>资讯</li>
                <li>折扣</li>
                <li>视频</li>
                <li>体验</li>
                <li>体验师</li>
                <li>ARR下载</li>
            </ul>
        </div>
    </div>

    <!-- 免费试用 -->
    <div class="box">
        <div class="box_1">
            <div class="box_2">
                <h1>免费试用</h1>
            </div>
            <ul class="box_3">
                <li class="li com">大众试用</li>
                <li class="li">体验师专享</li>
            </ul>
            <div class="box_4">
                <ul class="box_5">
                    <li class="ul">全部</li>
                    <li class="ul">申请中</li>
                    <li class="ul">试用中</li>
                    <li class="ul">已结束</li>
                </ul>
            </div>
        </div>
        <div class="box_6">
            <div class="box_7" style="display: block;">
                <!-- <div class="box_8">
                    <img src="./img/hot5.jpg" alt="">
                    <span class="box_9">首发</span>
                    <p>巴慕达 The Toaster 烤面包机</p>
                    <div class="box_10">
                        <div class="box_11">
                            <span>2032</span>
                            <span>20台</span>
                        </div>
                        <span class="box_12">
                            <span>1392</span>
                            申请
                        </span>
                        <br>
                        <span>报告数量：8</span>
                    </div>
                </div> -->
            </div>
            <div class="box_7 lino">体验师专享</div>
        </div>
        <div class="one1" style="display: block;">加载更多1</div>
        <div class="one2">加载更多2</div>

        <!-- 底部 -->
    <div class=" dibu_1">
        <div class="dibu_2">
          <div class="dibu_3">
            <a href=""><img src="./img/底部极果.png" alt=""></a>
          </div>
          <div class="dibu_4">
            <dl>
              <dt>免费试用</dt>
              <dd>试用流程</dd>
              <dd>如何提高成功率</dd>
              <dd>体验师功率</dd>
              <dd>极果用户协议</dd>
            </dl>
            <dl>
              <dt>关于极果</dt>
              <dd>发展历程</dd>
              <dd>合作伙伴</dd>
              <dd>加入极果</dd>
              <dd>网站地图</dd>
            </dl>
            <dl>
              <dt>商务合作</dt>
              <dd>产品试用</dd>
              <dd>营销服务</dd>
              <dd>电商导购</dd>
              <dd>优品分销</dd>
              <dd>联系我们</dd>
            </dl>
          </div>
          <div class="dibu_5">
            <div class="dibu_6">
              <img src="./img/极果二维码一.jpg" alt="">
              <address>扫码下载
                <br>
                极果手机客户端
              </address>
            </div>
            <div class="dibu_7">
              <img src="./img/极果二维码二.png" alt="">
              <address>极果微信公众号
                <br>
                jguojiguo
              </address>
            </div>
            <div class="dibu_8">
              <img src="./img/极果二维码三.png" alt="">
              <address>极果试用服务号
                <br>
                jiguosy
              </address>
            </div>
            <div class="dibu_9">
              <img src="./img/极果二维码四.png" alt="">
              <address>极果优品微信公众号
                <br>
                jgypgw
              </address>
            </div>
          </div>
        </div>
        <div class="dibu_10">
          <div class="dibu_11">友情链接</div>
          <div class="dibu_12">
            <dl>
              <a href="">智东西</a>
              <a href="">腾讯科技</a>
              <a href="">搜狐数码</a>
              <a href="">凤凰科技</a>
              <a href="">凤凰数码</a>
              <a href="">泡泡网</a>
              <a href="">极客公园</a>
              <a href="">汽车科技</a>
              <a href="">果库</a>
              <a href="">半糖</a>
              <a href="">趣玩网</a>
              <a href="">B12</a>
              <a href="">网易严选</a>
              <a href="">新零售</a>
              <a href="">良仓</a>
              <a href="">设计癖</a>
              <a href="">爱燃烧</a>
              <a href="">更多</a>
            </dl>
          </div>
        </div>
        <div class="dibu_13">
          <p class="dibu_14">
            Copyright ©2022极果All rights reserved
            <a href="">京ICP备14052927号</a>
            <img src="./img/京.png" alt="">
            京公网安备 11010202034988
          </p>
          <p class="dibu_15">北京极智飞扬科技有限公司 | 400-001-9217</p>
          <p class="dibu_16">北京市海定区学清路10号院1号楼学清嘉创大厦A座13层</p>
        </div>
      </div>
    </div>
</body>

</html>
<script>
    $(function () {
        // 大众试用  体验师专项切换
        $('.li').click(function () {
            $(this).addClass('com').siblings().removeClass('com');
            var index = $(this).index();
            $('.box_7').eq(index).show().siblings(".box_7").hide();
        })

        window.onload = function () {
            $.ajax({
                url: 'http://localhost:3000/useing/public',
                type: 'get',
                success(res) {
                    var mor = '';
                    $.each(res, function (num) {
                        mor += ` <div class="box_8">
                    <img src="${res[num].img}" alt="">
                    <span class="box_9">${res[num].info_ty}</span>
                    <p>${res[num].text}</p>
                    <div class="box_10">
                        <div class="box_11">
                            <span>${res[num].totalnum}</span>
                            <span>${res[num].num}</span>
                        </div>
                        <span class="box_12">
                            <span>${res[num].num}</span>
                            申请
                        </span>
                        <br>
                        <span>报告数量：${res[num].num}</span>
                    </div>
                </div>`
                    })
                    $('.box_7').eq(0).html(mor)
                }
            })
            
            //大众试用加载更多
            $('.one1').click(function(){
                $('.box_7').eq(0).css('height','auto')
                $(this).text('加载完毕~~~~')
            })
            $('.li').eq(0).click(function(){
                $('one1').show();
                $('one2').hide();
            })
        }

        //体验师专项
        $('.li').eq(1).click(function(){
            $('.one2').show();
            $('.one1').hide();

            $.ajax({
                url: 'http://localhost:3000/useing/public',
                type: 'get',
                success(res) {
                    var mor = '';
                    $.each(res, function (num) {
                        mor += ` <div class="box_8">
                    <img src="${res[num].img}" alt="">
                    <span class="box_9">${res[num].info_ty}</span>
                    <p>${res[num].text}</p>
                    <div class="box_10">
                        <div class="box_11">
                            <span>${res[num].totalnum}</span>
                            <span>${res[num].num}</span>
                        </div>
                        <span class="box_12">
                            <span>${res[num].num}</span>
                            申请
                        </span>
                        <br>
                        <span>报告数量：${res[num].num}</span>
                    </div>
                </div>`
                    })
                    $('.box_7').eq(1).html(mor)
                }
            })
            $('.one2').click(function(){
                $('.box_7').eq(1).css('height','auto')
                $(this).text('加载完毕~~~~')
            })
        })
    })
</script>